<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/loading/okLoading.css"/>
    <script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
</head>
<body>
<div id="app">
    <select id="yearSelect" v-model="yearSelect" @click="fetchMonthlySales(yearSelect)">
        <option value="2024" selected>2024年</option>
        <option value="2023">2023年</option>
        <option value="2022">2022年</option>
    </select>
    <div id="main" style="width: 100%;height:400px;margin-top: 50px;"></div>
    <div id="main2" style="width: 100%;height:400px;margin-top: 50px;"></div>
</div>
<script src="../../lib/echarts/echarts.min.js"></script>
<script src="axios.js"></script>
<script src="vue.js"></script>
<script type="text/javascript">
    okLoading.close();
    new Vue({
        el: '#app',
        data: {
            yearSelect:'2024',
            salesData: [],
        },
        mounted() {
            this.fetchMonthlySales(this.yearSelect);
            this.fetchMonthlySales1();
        },
        methods: {
            fetchMonthlySales1() {
                axios.post('../../permission.action?op=foodPermissoon')
                    .then(response => {
                        if (response.data.code==1){
                            this.salesData = response.data.obj;
                            this.renderChart1();
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching monthly sales:', error);
                    });
            },
            fetchMonthlySales() {
                var params=new URLSearchParams();
                params.append("year",this.yearSelect);
                axios.post('../../permission.action?op=permission',params)
                    .then(response => {
                        if (response.data.code==1){
                            this.salesData = response.data.obj;
                            this.renderChart();
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching monthly sales:', error);
                    });
            },
            renderChart1() {
                var myChart = echarts.init(document.getElementById('main2'));
                var option = {
                    title: {
                        text: '最热销售菜品'
                    },
                    tooltip: {},
                    legend: {
                        data: ['数量']
                    },
                    xAxis: {
                        data: this.salesData.map(item => item.food_name)
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: this.salesData.map(item => item.totalbuynum)
                    }]
                };
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            renderChart() {
                var myChart = echarts.init(document.getElementById('main'));
                var option = {
                    title: {
                        text: '年度月份营收图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['数量']
                    },
                    xAxis: {
                        data: this.salesData.map(item => item.month+"月")
                    },
                    yAxis: {},
                    series: [{
                        name: '营收金额(单位:元)',
                        type: 'bar',
                        data: this.salesData.map(item => item.sales)
                    }]
                };
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }
        }
    });
</script>
</body>
</html>
